<template>
  <div :class="className" :id="id" :style="{height:height,width:width}"/>
</template>

<script>
  import echarts from 'echarts'
  import resize from './mixins/resize'

  export default {
    mixins: [resize],
    props: {
      className: {
        type: String,
        default: 'chart'
      },
      id: {
        type: String,
        default: 'chart'
      },
      width: {
        type: String,
        default: '200px'
      },
      height: {
        type: String,
        default: '200px'
      }
    },
    data() {
      return {
        chart: null
      }
    },
    mounted() {
      this.initChart()
    },
    beforeDestroy() {
      if (!this.chart) {
        return
      }
      this.chart.dispose()
      this.chart = null
    },
    methods: {
      initChart() {
        this.chart = echarts.init(document.getElementById(this.id))
        // https://echarts.baidu.com/examples/editor.html?c=bar-label-rotation
        let labelOption = {
          normal: {
            rotate: 90,
            align: 'left',
            verticalAlign: 'middle',
            position: 'insideBottom',
            distance: 15,
            show: true,
            formatter: '{c}  {name|{a}}',
            fontSize: 16,
            rich: {
              name: {
                textBorderColor: '#fff'
              }
            }
          }
        };


        let option = {
          color: ['#003366',  '#E2E035','#006699', '#4cabce', '#e5323e', '#C92DE5'],
          tooltip: {
            trigger: 'axis',
            axisPointer: {
              type: 'shadow'
            }
          },
          legend: {
            // data: ['Forest', 'Steppe', 'Desert', 'Wetland']

            data: ['月度熟料产量', '月度水泥产量', '月度机械常规件消耗', '月度机械故障件消耗', '月度电气常规件消耗', '月度电气故障件消耗']
          },
          toolbox: {
            show: true,
            orient: 'vertical',
            left: 'right',
            top: 'center',
            feature: {
              mark: {show: true},
              dataView: {show: true, readOnly: false},
              magicType: {show: true, type: ['line', 'bar', 'stack', 'tiled']},
              restore: {show: true},
              saveAsImage: {show: true}
            }
          },


          calculable: true,
          xAxis: [
            {
              type: 'category',
              axisTick: {show: false},
              data: ['英德海螺', '清新水泥', '阳春海螺', '江门海螺', '佛山海螺']
              // data: ['2012', '2013', '2014', '2015', '2016']
            }
          ],
          yAxis: [
            {
              type: 'value'
            }
          ],

          series: [
            {
              name: '月度熟料产量',
              type: 'bar',
              barGap: 0,
              label: labelOption,
              data: [120, 132, 101, 134, 90]
            },
            {
              name: '月度水泥产量',
              type: 'bar',
              label: labelOption,
              // data: [220, 182, 191, 234, 290]
              data: [71.00, 33.92, 51.99, 33.31, 29.82]
            },
            {
              name: '月度机械常规件消耗',
              type: 'bar',
              label: labelOption,
              // data: [150, 232, 201, 154, 190]
              data: [74.63, 44.33, 55.28, 37.21, 40.60]
            },
            {
              name: '月度机械故障件消耗',
              type: 'bar',
              label: labelOption,
              // data: [150, 232, 201, 154, 190]
              data: [186.75	, 102.07	, 118.09	, 21.00 , 33.00 ]
            },
            {
              name: '月度电气故障件消耗',
              type: 'bar',
              label: labelOption,
              // data: [150, 232, 201, 154, 190]
              data: [37.1	, 7.37	, 26.7	, 33 , 33 ]
            },
            {
              name: '月度电气常规件消耗',
              type: 'bar',
              label: labelOption,
              data: [22, 32, 12, 66, 40]
            }
          ]
        };
        this.chart.setOption(option)
//===================================================
      }
    }
  }
</script>
